<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1000" class="view-file">
    <embed v-if="isPdf" :src="file" type="application/pdf" width="100%" height="100%" />
    <img v-else-if="isImage" :src="file" alt="Image Preview" width="100%" />
    <iframe v-else-if="isDoc" :src="getDocViewerUrl()" width="100%" height="100%"></iframe>
    <div
      style="position: absolute; top: 0; right: 0; left: 0; height: 120px; pointer-events: all"
    ></div>
    <div
      style="position: absolute; right: 0; bottom: 0; left: 0; height: 100px; pointer-events: all"
    ></div>
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('查看') // 弹窗的标题
const file = ref('')
const fileType = ref('')
/** 打开弹窗 */
const open = async (data) => {
  dialogVisible.value = true
  file.value = data
  fileType.value = getFileExtensionFromUrl(data)
}

defineExpose({ open })

const isPdf = computed(() => fileType.value === 'pdf')
const isImage = computed(() => ['png', 'jpg', 'jpeg', 'gif'].includes(fileType.value))
const isDoc = computed(() => ['doc', 'docx'].includes(fileType.value))

function getFileExtensionFromUrl(url) {
  // 创建一个 URL 对象以便安全地解析 URL
  const parsedUrl = new URL(url)

  // 获取文件名（包括可能存在的扩展名）
  const fileName = parsedUrl.pathname.split('/').pop()

  // 如果文件名包含查询参数，移除它们
  const cleanFileName = fileName.split('?')[0]

  // 分割文件名和扩展名，并返回扩展名（如果有）
  const parts = cleanFileName.split('.')
  if (parts.length > 1) {
    // 文件扩展名是最后一部分，转换为小写以确保一致性
    return parts.pop().toLowerCase()
  } else {
    // 如果没有找到扩展名，则返回空字符串或 null 等
    return ''
  }
}
function getDocViewerUrl() {
  // return `https://view.xdocin.com/xdoc?_xdoc=${file.value}`
  return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(file.value)}`
}
</script>

<style>
.view-file {
  height: 800px;

  .el-dialog__body {
    overflow-y: auto;
  }
}
</style>
